<!-- src/components/user/UserInfo.vue -->
<template>
    <div class="info-section">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="用户ID">
          {{ userInfo.userId }}
        </el-descriptions-item>
        <el-descriptions-item label="电子邮箱">
          {{ userInfo.email }}
          <el-button type="primary" link @click="$emit('edit', 'email')">
            修改
          </el-button>

        </el-descriptions-item>
        <el-descriptions-item label="注册时间">
          {{ formatDate(userInfo.createdAt) }}
        </el-descriptions-item>
        <el-descriptions-item label="上次登录">
          {{ formatDate(userInfo.lastLogin) }}
        </el-descriptions-item>
      </el-descriptions>
  
      <div class="action-buttons">
        <el-button type="primary" @click="$emit('edit', 'username')">
          修改用户名
        </el-button>
        <el-button type="warning" @click="$emit('edit', 'password')">
          修改密码
        </el-button>
      </div>
    </div>
  </template>
  
  <script setup>
  defineProps({
    userInfo: {
      type: Object,
      required: true
    }
  })
  
  defineEmits(['edit'])
  
  const formatDate = (date) => {
    return new Date(date).toLocaleString()
  }
  </script>
  
  <style scoped>
  .info-section {
    margin-top: 20px;
  }
  
  .action-buttons {
    margin-top: 20px;
    text-align: right;
  }
  </style>